<template>
  <div class="w-screen h-screen flex justify-center items-center bg-gray-700">
    <div class="w-160 h-84 grid grid-cols-2 items-center">
      <div
        class="h-4/5 flex flex-col justify-center bg-gray-800 px-8 shadow-2xl"
      >
        <h1 class="text-white text-left text-2xl mb-8">欢迎</h1>
        <p class="text-left text-gray-400">请输入房间号后 进入多人视频会议</p>
      </div>
      <el-form
        class="flex flex-col justify-center px-8 h-full bg-gray-100 shadow-2xl"
        :model="form"
        :rules="rules"
        ref="ruleFormRef"
      >
        <el-form-item label="用户名" required prop="user">
          <el-input v-model="form.user" />
        </el-form-item>
        <el-form-item class="mt-10" label="房间号" required prop="roomId">
          <el-input v-model.number="form.roomId" type="number" />
        </el-form-item>
        <div class="flex justify-center mt-10">
          <el-button size="large" round @click="handleCreateRoom"
            >进入房间</el-button
          >
        </div>
      </el-form>
    </div>
    <el-dialog
      v-model="dialogVisible"
      destroy-on-close
      :closed="handleStreamChange"
      title="Tips"
      width="500px"
    >
      <div id="camera"></div>
      <el-checkbox-group v-model="checkList" @change="handleStreamChange">
        <el-checkbox label="video" name="video">摄像头</el-checkbox>
        <el-checkbox label="audio" name="audio">音频</el-checkbox>>
        <el-checkbox
          label="beauty"
          name="beauty"
          :disabled="!checkList.includes('video')"
          >美颜</el-checkbox
        >
      </el-checkbox-group>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleStartRoom">
            进入会议
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { FormInstance } from "element-plus";
import TRTC from "trtc-js-sdk";
import type { Client, LocalStream, RemoteStream } from "trtc-js-sdk";
import RTCBeautyPlugin from "rtc-beauty-plugin";

const rules = reactive({
  user: [{ required: true, message: "请输入用户id", trigger: "blur" }],
  roomId: [{ required: true, message: "请输入房间号", trigger: "blur" }],
});
const checkList = ref(["audio", "video"]);
const form = reactive({
  user: "",
  roomId: "",
  audio: true,
  video: true,
  beauty: false,
});
const route = useRoute();
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const dialogVisible = ref(false);
let localStream: LocalStream;
// 创建本地流
const createCameraStream = async () => {
  let localStream;
  try {
    // 初始化摄像头流
    localStream = TRTC.createStream({
      userId: "test",
      audio: checkList.value.includes("audio"),
      video: checkList.value.includes("video"),
    });

    await localStream.initialize();
  } catch (e: any) {
    throw new Error(e);
  }
  if (checkList.value.includes("beauty")) {
    const beautyPlugin = new RTCBeautyPlugin();
    localStream = beautyPlugin.generateBeautyStream(localStream);
  }

  return localStream;
};
// 选择改变
async function handleStreamChange(value: string[]) {
  localStream?.close();
  localStream = await createCameraStream();
  localStream.play("camera");
}

async function handleCreateRoom() {
  await ruleFormRef.value?.validate(async (valid, fields) => {
    if (valid) {
      dialogVisible.value = true;
      localStream = await createCameraStream();

      localStream.play("camera");
    }
  });
}

async function handleClose() {
  dialogVisible.value = false;
  localStream?.close();
}

function handleStartRoom() {
  form.beauty = checkList.value.includes("beauty");
  form.video = checkList.value.includes("video");
  form.audio = checkList.value.includes("audio");
  router.push({ path: "page", query: { ...form } });
}

onMounted(() => {
  if (route.query.roomId) form.roomId = route.query.roomId as string;
});
</script>

<style lang="scss" scoped>
#camera {
  height: 300px;
  background-color: #000;
}
</style>